본문
슬라이드 갤러리 스크립트 입니다.
출처 : http://www.blueb.co.kr/bbs.php?table=JS_01&query=view&uid=312&p=1
<html>
<head>
<title>http://www.blueb.co.kr</title>
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/js/jquerypack.js"></script>
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/js/stepcarousel.js"></script>
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
border: 1px solid gray;
overflow: scroll; /*leave this value alone*/
width: 480px;
height: 330px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 15px; /*margin around each panel*/
width: 450px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
</head>
<body>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel"><img src="http://www.blueb.co.kr/SRC/flash/image/01.jpg"></div>
<div class="panel"><img src="http://www.blueb.co.kr/SRC/flash/image/03.jpg"></div>
<div class="panel"><img src="http://www.blueb.co.kr/SRC/flash/image/04.jpg"></div>
<div class="panel"><img src="http://www.blueb.co.kr/SRC/flash/image/06.jpg"></div>
<div class="panel"><img src="http://www.blueb.co.kr/SRC/flash/image/07.jpg"></div>
<div class="panel"><img src="http://www.blueb.co.kr/SRC/flash/image/08.jpg"></div>
</div>
</div>
<table width=480><td align=center>
<B><span id="statusA"></span></B> / <span id="statusC"></span><br>
<a href="javascript:stepcarousel.stepBy('mygallery', -1)">맨끝</a> |
<a href="javascript:stepcarousel.stepTo('mygallery', 1)">맨처음</a><br>
<a href="javascript:stepcarousel.stepBy('mygallery', 1)">한장 다음</a> |
<a href="javascript:stepcarousel.stepBy('mygallery', -1)">한장 이전</a><br>
<a href="javascript:stepcarousel.stepBy('mygallery', 2)">두장 다음</a> |
<a href="javascript:stepcarousel.stepBy('mygallery', -2)">두장 이전</a><br>
</td></table>
</body>
</html>
관련링크
댓글목록
등록된 댓글이 없습니다.